<template>
  <div class="page-wrapper">
    <div class="page-header">
      <span class="text-primary font-bold">已办任务</span>
    </div>

    <div class="page-content">
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="流程名称">
          <el-input v-model="searchForm.name" placeholder="请输入流程名称" clearable />
        </el-form-item>
        <el-form-item label="流程分类">
          <el-select v-model="searchForm.category" placeholder="请选择流程分类" clearable>
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="用户编号">
          <el-input v-model="searchForm.userId" placeholder="请输入用户编号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格区域 -->
      <div class="table-wrapper">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column
            prop="processInstanceName"
            label="流程名称"
            width="150"
            show-overflow-tooltip
          />
          <el-table-column prop="name" label="任务名称" width="150" show-overflow-tooltip />
          <el-table-column prop="assignee" label="办理人" width="170" show-overflow-tooltip />
          <el-table-column prop="createTime" label="创建时间" width="180" show-overflow-tooltip />
          <el-table-column prop="endTime" label="完成时间" width="180" show-overflow-tooltip />
          <el-table-column prop="reason" label="处理意见" min-width="110" show-overflow-tooltip />
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" link @click="handleDetail(row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页区域 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="DoneList">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type { TaskVo } from '@/types/flow'
import { getTaskDonePage } from '@/api/flow/task'
import { useDictOptions } from '@/utils/dict'

// 搜索表单
const searchForm = reactive({
  name: '',
  category: '',
  userId: '', // 当前用户ID，需要从用户状态获取
})

// 表格数据
const tableData = ref<TaskVo[]>([])
const loading = ref(false)

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 流程分类选项
const { options: categoryOptions } = useDictOptions('bpmn_category')

// 加载表格数据
const loadTableData = async () => {
  loading.value = true
  try {
    const params = {
      pageNo: currentPage.value,
      pageSize: pageSize.value,
      ...searchForm,
    }
    const res = await getTaskDonePage(params)
    if (res.data) {
      tableData.value = res.data.list || []
      total.value = res.data.total || 0
    }
  } catch (error) {
    console.error('获取已办任务列表失败:', error)
    ElMessage.error('获取已办任务列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  loadTableData()
}

// 重置搜索
const resetSearch = () => {
  searchForm.name = ''
  searchForm.category = ''
  searchForm.userId = ''
  handleSearch()
}

// 查看详情
const handleDetail = (row: TaskVo) => {
  // TODO: 实现查看详情逻辑
  console.log('查看详情:', row)
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  loadTableData()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadTableData()
}

// 初始化加载数据
onMounted(() => {
  loadTableData()
})
</script>

<style scoped>
.done-list {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
